<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>眼底随访系统</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="/static/css/style.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        /* 自定义动画和过渡效果 */
        .fade-up {
            opacity: 0;
            transform: translateY(20px);
            animation: fadeUp 0.8s ease forwards;
        }
        @keyframes fadeUp {
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        .pulse {
            animation: pulse 2s infinite;
        }
        @keyframes pulse {
            0% {
                box-shadow: 0 0 0 0 rgba(13, 110, 253, 0.7);
            }
            70% {
                box-shadow: 0 0 0 10px rgba(13, 110, 253, 0);
            }
            100% {
                box-shadow: 0 0 0 0 rgba(13, 110, 253, 0);
            }
        }
        .card-hover:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
        }
        /* 导航栏滚动效果 */
        .navbar-scrolled {
            background-color: rgba(255, 255, 255, 0.95);
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        }
        /* 添加行间距设置 */
        body {
            line-height: 1.6;
        }
        /* 统一按钮样式 */
        .btn-custom { border-radius: 50px; padding: 0.5rem 1.25rem; transition: all 0.3s ease; font-weight: 500; display: inline-flex; align-items: center; justify-content: center; }
        .btn-primary.btn-custom { background-color: #0d6efd; border-color: #0d6efd; }
        .btn-primary.btn-custom:hover { background-color: #0a58ca; box-shadow: 0 4px 12px rgba(13, 110, 253, 0.3); transform: translateY(-1px); }
        .btn-outline-primary.btn-custom { color: #0d6efd; border-color: #0d6efd; }
        .btn-outline-primary.btn-custom:hover { background-color: #0d6efd; color: white; box-shadow: 0 4px 12px rgba(13, 110, 253, 0.3); transform: translateY(-1px); }
        .btn-outline-secondary.btn-custom { color: #6c757d; border-color: #6c757d; }
        .btn-outline-secondary.btn-custom:hover { background-color: #6c757d; color: white; box-shadow: 0 4px 12px rgba(108, 117, 125, 0.3); transform: translateY(-1px); }
        /* 图片容器样式 */
        .img-container { position: relative; overflow: hidden; border-radius: 10px; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); transition: transform 0.3s ease; }
        .img-container:hover { transform: scale(1.02); }
        .img-caption { text-align: center; margin-top: 10px; font-size: 0.9rem; color: #6c757d; }
        /* 新增动画 */
        .bg-gradient-radial {
            background-image: radial-gradient(var(--tw-gradient-stops));
        }
        .animate-bounce-slow {
            animation: bounce 3s infinite;
        }
        .animation-delay-2000 {
            animation-delay: 2s;
        }
        @keyframes bounce {
            0%, 100% {
                transform: translateY(0);
            }
            50% {
                transform: translateY(-10px);
            }
        }
    </style>
</head>
<body class="bg-white">
    <!-- 导航栏 -->
    <nav class="navbar navbar-expand-lg navbar-light bg-white shadow-sm fixed-top transition-all duration-300">
        <div class="container">
            <a class="navbar-brand d-flex align-items-center" href="/">
                <img src="/static/images/logo.png" alt="Logo" class="rounded-circle me-2" width="40" height="40">
                <span class="font-bold text-primary">眼底随访系统</span>
            </a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <div class="navbar-nav ms-auto">
                    <!-- 统一按钮样式 - 设计声明 -->
                    <a href="/static/docs/作品设计文档.pdf" target="_blank" class="btn btn-outline-secondary btn-custom mx-1 d-flex align-items-center">
                        <i class="fas fa-file-alt me-2"></i>设计声明
                    </a>
                    <a class="btn btn-outline-primary btn-custom mx-1" href="https://112145rm6yw01.vicp.fun/">主站</a>
                    <a class="btn btn-outline-primary btn-custom mx-1" href="/static/Android/app-release.apk">安卓端下载</a>
                    <a class="btn btn-outline-primary btn-custom mx-1" href="#features">功能介绍</a>
                    <!-- 统一按钮样式 - 登录 -->
                    <a href="/login" class="btn btn-outline-primary btn-custom mx-1">登录</a>
                    <!-- 统一按钮样式 - 管理员入口 -->
                    <a href="/admin/login" class="btn btn-primary btn-custom mx-1">管理员入口</a>
                </div>
            </div>
        </div>
    </nav>

    <!-- Hero 区域 -->
    <section class="hero-section bg-gradient-to-br from-blue-50 to-indigo-50 pt-24 pb-16 px-4 overflow-hidden">
        <div class="container max-w-5xl mx-auto">
            <div class="row align-items-center">
                <div class="col-md-6 fade-up" style="animation-delay: 0.1s">
                    <h1 class="text-4xl md:text-5xl font-bold text-gray-800 mb-4 leading-tight">智能眼底随访系统</h1>
                    <p class="text-lg text-gray-600 mb-8 max-w-lg">结合先进AI技术，提供专业、高效的眼底疾病随访与诊断解决方案，助力医生精准判断病情发展。</p>
                    <div class="flex flex-wrap gap-3">
                        <!-- 统一按钮样式 - 开始使用 -->
                        <a href="/login" class="btn btn-primary btn-custom px-8 py-3 pulse">开始使用</a>
                        <!-- 统一按钮样式 - 了解更多 -->
                        <a href="#features" class="btn btn-outline-primary btn-custom px-8 py-3">了解更多</a>
                    </div>
                </div>
                <div class="col-md-6 fade-up" style="animation-delay: 0.3s">
                    <div class="relative">
                        <img src="/static/images/logo.png" alt="眼底随访系统" class="rounded-xl shadow-lg mx-auto" width="300" height="300">
                        <div class="absolute -z-10 top-10 left-10 w-full h-full bg-primary/20 rounded-full blur-3xl"></div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 功能介绍区域 -->
    <section id="features" class="features-section py-20 px-4 bg-white">
        <div class="container max-w-6xl mx-auto">
            <h2 class="text-3xl font-bold text-center text-gray-800 mb-4 fade-up" style="animation-delay: 0.1s">核心功能</h2>
            <p class="text-center text-gray-600 mb-16 fade-up" style="animation-delay: 0.2s; max-width: 700px; margin: 0 auto;">我们的系统集成了先进的AI技术和专业的医疗知识，为眼底疾病的随访和诊断提供全面支持</p>

            <!-- 核心功能卡片 -->
            <div class="grid grid-cols-1 md:grid-cols-3 gap-8 mb-16">
                <div class="card p-6 rounded-xl shadow-md bg-white fade-up card-hover transition-all duration-500" style="animation-delay: 0.2s">
                    <div class="w-14 h-14 bg-blue-100 rounded-full flex items-center justify-center mb-4">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#0d6efd" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"></path><path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"></path></svg>
                    </div>
                    <h3 class="text-xl font-semibold text-gray-800 mb-3">随访记录管理</h3>
                    <p class="text-gray-600">便捷记录和管理患者随访信息，支持多维度查询和筛选，提高工作效率。系统支持详细的患者信息管理、随访计划制定和执行跟踪。</p>
                </div>
                <div class="card p-6 rounded-xl shadow-md bg-white fade-up card-hover transition-all duration-500" style="animation-delay: 0.3s">
                    <div class="w-14 h-14 bg-blue-100 rounded-full flex items-center justify-center mb-4">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#0d6efd" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12.01" y2="17"></line></svg>
                    </div>
                    <h3 class="text-xl font-semibold text-gray-800 mb-3">AI辅助诊断</h3>
                    <p class="text-gray-600">集成DeepSeek和华佗模型，提供专业的眼底疾病诊断建议，辅助医生做出更精准的判断。系统能够自动分析眼底图像特征，识别病变区域，并提供量化分析报告。</p>
                </div>
                <div class="card p-6 rounded-xl shadow-md bg-white fade-up card-hover transition-all duration-500" style="animation-delay: 0.4s">
                    <div class="w-14 h-14 bg-blue-100 rounded-full flex items-center justify-center mb-4">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#0d6efd" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
                    </div>
                    <h3 class="text-xl font-semibold text-gray-800 mb-3">图像分析</h3>
                    <p class="text-gray-600">支持眼底图像上传和分析，自动识别病变区域，提供详细的图像分析报告。系统采用先进的图像处理算法，能够增强图像细节，帮助医生发现微小病变。</p>
                </div>
            </div>

            <!-- 模型性能展示 -->
            <div class="bg-gray-50 rounded-2xl p-8 shadow-sm mb-16">
                <h3 class="text-2xl font-bold text-center text-gray-800 mb-6 fade-up" style="animation-delay: 0.5s">模型性能展示</h3>
                <p class="text-center text-gray-600 mb-8 max-width: 700px; margin: 0 auto; fade-up" style="animation-delay: 0.6s">我们的AI模型在眼底疾病识别方面取得了优异的性能，以下是模型效果的可视化展示</p>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
                    <div class="img-container fade-up" style="animation-delay: 0.7s">
                        <img src="/static/images/模型效果特征矩阵.png" alt="模型效果特征矩阵" class="w-full h-auto rounded-lg object-contain transition-transform duration-500 hover:scale-105">
                        <p class="img-caption">模型效果特征矩阵：展示了不同病变特征的识别准确率</p>
                    </div>
                    <div class="img-container fade-up" style="animation-delay: 0.8s">
                        <img src="/static/images/模型效果热力图.png" alt="模型效果热力图" class="w-full h-auto rounded-lg object-contain transition-transform duration-500 hover:scale-105">
                        <p class="img-caption">模型效果热力图：可视化展示模型对病变区域的关注热点</p>
                    </div>
                </div>
            </div>

            <!-- 系统优势 -->
            <div class="fade-up" style="animation-delay: 0.9s">
                <h3 class="text-2xl font-bold text-center text-gray-800 mb-6">系统优势</h3>
                <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-2 gap-6 md:gap-8 mb-12">
                    <div class="flex items-start p-4 border rounded-lg hover:shadow-md transition-shadow duration-300">
                        <div class="w-10 h-10 bg-blue-100 rounded-full flex items-center justify-center mr-4 flex-shrink-0">
                            <i class="fas fa-bolt text-primary"></i>
                        </div>
                        <div>
                            <h4 class="font-semibold text-lg text-gray-800 mb-2">高效便捷</h4>
                            <p class="text-gray-600">简化工作流程，减少手动操作，提高医生工作效率</p>
                        </div>
                    </div>
                    <div class="flex items-start p-4 border rounded-lg hover:shadow-md transition-shadow duration-300">
                        <div class="w-10 h-10 bg-blue-100 rounded-full flex items-center justify-center mr-4 flex-shrink-0">
                            <i class="fas fa-shield-alt text-primary"></i>
                        </div>
                        <div>
                            <h4 class="font-semibold text-lg text-gray-800 mb-2">数据安全</h4>
                            <p class="text-gray-600">严格的权限管理和数据加密，确保患者信息安全</p>
                        </div>
                    </div>
                    <div class="flex items-start p-4 border rounded-lg hover:shadow-md transition-shadow duration-300">
                        <div class="w-10 h-10 bg-blue-100 rounded-full flex items-center justify-center mr-4 flex-shrink-0">
                            <i class="fas fa-graduation-cap text-primary"></i>
                        </div>
                        <div>
                            <h4 class="font-semibold text-lg text-gray-800 mb-2">专业支持</h4>
                            <p class="text-gray-600">结合多位眼科专家的临床经验，提供专业的诊断建议</p>
                        </div>
                    </div>
                    <div class="flex items-start p-4 border rounded-lg hover:shadow-md transition-shadow duration-300">
                        <div class="w-10 h-10 bg-blue-100 rounded-full flex items-center justify-center mr-4 flex-shrink-0">
                            <i class="fas fa-chart-line text-primary"></i>
                        </div>
                        <div>
                            <h4 class="font-semibold text-lg text-gray-800 mb-2">病情追踪</h4>
                            <p class="text-gray-600">长期跟踪患者病情变化，提供趋势分析和干预建议</p>
                        </div>
                    </div>
                </div>


                <!-- 行动号召 -->
                <div class="text-center">
                    <a href="/login" class="btn btn-primary btn-custom px-8 py-3 pulse">立即体验</a>
                </div>
            </div>
        </div>
    </section>

    <!-- 页脚 -->
    <footer class="bg-gray-50 py-10 border-t border-gray-200">
        <div class="container max-w-5xl mx-auto px-4">
            <div class="text-center text-gray-600">
                <div class="mb-6">
                    <img src="/static/images/logo.png" alt="Logo" class="rounded-circle mx-auto" width="70" height="70">
                </div>
                <h3 class="text-xl font-semibold text-gray-800 mb-3">眼底随访系统</h3>
                <p class="mb-5 max-w-md mx-auto">专业的眼底疾病随访与诊断解决方案，结合AI技术，为医生和患者提供更好的医疗体验。</p>
                <div class="flex justify-center space-x-4 mb-6">
                    <a href="#" class="text-gray-500 hover:text-primary transition-colors duration-300"><i class="fab fa-weixin text-xl"></i></a>
                    <a href="#" class="text-gray-500 hover:text-primary transition-colors duration-300"><i class="fab fa-weibo text-xl"></i></a>
                    <a href="#" class="text-gray-500 hover:text-primary transition-colors duration-300"><i class="fas fa-envelope text-xl"></i></a>
                </div>
                <p>© 2025 眼底随访系统. 保留所有权利.</p>
            </div>
        </div>
    </footer>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        // 导航栏滚动效果
        window.addEventListener('scroll', function() {
            const navbar = document.querySelector('.navbar');
            if (window.scrollY > 50) {
                navbar.classList.add('navbar-scrolled');
            } else {
                navbar.classList.remove('navbar-scrolled');
            }
        });

        // 平滑滚动
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function (e) {
                e.preventDefault();
                document.querySelector(this.getAttribute('href')).scrollIntoView({
                    behavior: 'smooth'
                });
            });
        });
    </script>
</body>
</html>